<template>
  <div class="login">
    <div class="login-form">
      <h1>登录</h1>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="userName">
          <MyInput v-model:value="ruleForm.userName" placeholder="请输用户名" width="80%"/>
        </el-form-item>
        <el-form-item label="密码" prop="userPass">
          <MyInput v-model:value="ruleForm.userPass" placeholder="请输密码" width="80%"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import { login } from '../api/user'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import useStore from '../store/index'
const UseUserStore = useStore()
const router = useRouter()
const ruleFormRef = ref<FormInstance>();

const checkAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error("Please input the age"));
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error("Please input digits"));
    } else {
      if (value < 18) {
        callback(new Error("Age must be greater than 18"));
      } else {
        callback();
      }
    }
  }, 1000);
};

const userName = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入用户名"));
  } else {
    callback();
  }
};
const userPass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    callback();
  }
};

const ruleForm = reactive({
  userName: "Admin",
  userPass: "Abc123@@@",
});

const rules = reactive({
  userName: [{ validator: userName, trigger: "blur" }],
  userPass: [
    { validator: userPass, trigger: "blur" },
    {
      pattern:
        /^(?![A-Za-z0-9]+$)(?![a-z0-9\W]+$)(?![A-Za-z\W]+$)(?![A-Z0-9\W]+$)[a-zA-Z0-9\W]{8,16}$/,
      message: "必须包含大写字母、小写字母、数字、特殊符号(8-16)",
      trigger: "change",
    },
  ],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
      login(ruleForm).then((res:any)=>{
        console.log('登录成功',res);
        if(res.code === 200) {
          ElMessage({
            showClose: true,
            message: res.message,
            type: 'success',
          })
          localStorage.setItem('token',res.token)
          UseUserStore.user.setMenu(res.menu)
          router.push('/')
        }       
      })
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>
<style scoped lang="less">
.login {
  background-image: url("../assets/img/login.png");
  width: 100%;
  height: 100vh;
  position: relative;
  &-form {
    position: absolute;
    height: 95%;
    top: 0;
    right: 0;
    width: 30%;
    background-color: rgba(255, 255, 255, 0.521);
    padding: 20px;
    color: white;
  }
}
</style>
